<script setup lang="ts">
import bg from 'src/assets/enter-competition/theme.jpg'
import bgh5 from 'src/assets/enter-competition/themeh5.jpg'
import Banner from './components/Banner.vue'
import PrizeSettings from './components/PrizeSettings.vue'
import Standard from './components/Standard.vue'
import GameProfile from './components/GameProfile.vue'
import Participants from './components/Participants.vue'
import EntryRequirements from './components/EntryRequirements.vue'

// const modules = [Mousewheel, Pagination]
// const swiperInst = ref()
// const activeIndex = ref(0)
// const { isMobile } = storeToRefs(useLayoutStore())
import { CompetitionTheme } from '~/api'

const { basicInfo } = storeToRefs(useTeamInfoStore())
const CompetitionInfo = ref([])

CompetitionTheme(basicInfo.value.scheduleId).then((res) => {
  // CompetitionInfo.value = res.data
  res.data.forEach((item) => {
    item.attendContent = item.attendContent.replace(/\s+size="[^"]*"/g, '') // 去除style样式
  })
  CompetitionInfo.value = res.data
})
</script>

<template>
  <FullPage>
    <FullPageItem><Banner /></FullPageItem>
    <!-- <FullPageItem>
      <PageItem :bg="bg" :h5bg="bgh5" title="大赛主题" :content-style="{ }">
        <div m="t-5vw x-1/10" lt-lg="">
          <img :src="bgtext" w-full object="contain">
        </div>
      </PageItem>
    </FullPageItem> -->

    <!-- 内容 对象 要求等循环 -->
    <FullPageItem
      v-for="(item, index) in CompetitionInfo" :key="index"
      style="height:auto"
    >
      <PageItem v-if="item.attendPosition === null && index == 0" :bg="bg" :h5bg="bgh5" :title="item.attendTitle" :content-style="{ }">
        <div m="t-5vw x-1/10" lt-lg="">
          <img :src="getAssetUrl(item.attendImgUrl)" w-full object="contain">
        </div>
      </PageItem>
      <GameProfile v-if="item.attendPosition === 'RIGHT'" :data-obj="item" />
      <Participants v-if="item.attendPosition === 'LEFT'" :data-obj="item" />
      <EntryRequirements v-if="item.attendPosition === null && index > 0" :data-obj="item" />
    </FullPageItem>

    <!--
    <FullPageItem> <GameProfile /> </FullPageItem>
    <FullPageItem> <Participants /> </FullPageItem>
    <FullPageItem> <EntryRequirements /> </FullPageItem>
    -->

    <FullPageItem>
      <PrizeSettings />
    </FullPageItem>
    <FullPageItem>
      <Standard />
    </FullPageItem>
  </FullPage>
</template>

<style scoped>
.mySwiper {
  @apply h-full;
}
</style>

<route lang="yaml">
meta:
  layout: no-footer
</route>
